<template>
  <div class="contain">
    <div class="option">
      <div class="optionForm">
        <div class="m-4"><span>1、工器具</span></div>
        <el-form :inline="true" :model="formInline" label-position="left" class="demo-form-inline m-l-20">
          <div class="" v-for="(item, index) in formInline.options" :key="index">
            <el-form-item label="名称" label-width="60px">
              <el-input class="shadow-lg" style="width: 120px;" v-model="item.name" clearable />
            </el-form-item>
            <el-form-item label="数量" label-width="60px">
              <el-input-number class="shadow-lg" style="width: 120px;" v-model="item.count" />
            </el-form-item>
            <el-form-item label="单位" label-width="60px">
              <!-- <el-input style="width: 40px;" v-model="item.unit" /> -->
              <el-select class="shadow-lg" v-model="item.unit" style="width: 60px">
                <el-option  v-for="option in unitOptions" :key="option.value" :label="option.label" :value="option.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-button class="shadow-lg" type="danger" @click="deleteItem(index, 1)" :icon="Delete" circle />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="right" style="width:100px">
        <el-button class="shadow-lg" type="primary" @click="addNewItem(1)" :icon="CirclePlus"  plain>添加</el-button>
      </div>
    </div>
    <div class="option">
      <div class="optionForm people">
        <div class="m-4"><span>2、工种</span></div>
        <el-form :inline="true" :model="formInline" label-position="left" class="demo-form-inline m-l-20">
          <div class="" v-for="(item, index) in formInline.peoples" :key="index">
            <el-form-item label="类型" label-width="60px">
              <el-input class="shadow-lg" style="width: 120px;" v-model="item.type" />
            </el-form-item>
            <el-form-item label="人数" label-width="60px">
              <el-input-number class="shadow-lg" style="width: 120px;" v-model="item.count" />
            </el-form-item>
            <el-form-item label="">
              <el-button class="shadow-lg"type="danger" @click="deleteItem(index, 2)" :icon="Delete" circle />
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="right" style="width:100px">
        <el-button class="shadow-lg" type="primary" @click="addNewItem(2)" :icon="CirclePlus"  plain>添加</el-button>
      </div>
    </div>

    <!-- <div class="bottom">
      <el-button type="primary" @click="onSubmit">生成文档</el-button>
    </div> -->
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
import {
  CirclePlus,
  Delete,
} from '@element-plus/icons-vue'
const unitOptions = [
{
  value:'1',
  label:'把'
},
{
  value:'2',
  label:'个'
},{
  value:'3',
  label:'条'
},{
  value:'4',
  label:'台'
}
]
interface optionForm {
  name: string,
  count: number,
  unit: string,
}
interface peopleForm {
  type: string,
  count: number
}
interface Form {
  options: optionForm[],
  peoples: peopleForm[]
}
const formInline = ref<Form>({
  options: [{name:'',count:1,unit:'1'}],
  peoples: [{type:'',count:1}]
})
const deleteItem = (index: number, type: number) => {
  if (type == 1) {
    formInline.value.options.splice(index, 1)
  } else {
    formInline.value.peoples.splice(index, 1)
  }
}
const addNewItem = (index: number) => {
  if (index == 1) {
    let newItem = {
      name: '',
      count: 1,
      unit: ''
    }
    formInline.value.options.push(newItem)
  } else {
    let newItem = {
      tyep: '',
      count: 1
    }
    formInline.value.peoples.push(newItem)
  }

}
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="less" scoped>
.contain {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;

  .option {
    display: flex;
    flex-direction: row;

    .optionForm {
      flex: 1;
    }

    .right {
      width: 60px;
    }
  }

  .bottom {
    float: right;
    // position: fixed;
    // bottom: 10px;
    // width: 80px;
    // margin: auto;
  }

}
</style>
